<!-- 分类选择表 -->
<div id="layout_goods_list">
    <div class="goods_type_list">
        <!-- ul li表格 -->
        <ul>
            <!-- F1 -->
            <li>
                <span class="le">按价格</span>
                <span class="ri">
                    <a href="javascript:void(0)" class="sub1 on">全部
                    </a>
                    <a href="javascript:void(0)" class="sub1">200元以内
                    </a>
                    <a href="javascript:void(0)" class="sub1">200-300元
                    </a>
                    <a href="javascript:void(0)" class="sub1">300-400元
                    </a>
                    <a href="javascript:void(0)" class="sub1">400-600元
                    </a>
                    <a href="javascript:void(0)" class="sub1">600-800元
                    </a>
                    <a href="javascript:void(0)" class="sub1">800-1000元
                    </a>
                    <a href="javascript:void(0)" class="sub1">1000元以上
                        <a>
                </span>
            </li>
            <!-- F2 -->
            <li>
                <span class="le">按对象</span>
                <span class="ri"></span>
            </li>
            <!-- F3 -->
            <li>
                <span class="le">按花材</span>
                <span class="ri"></span>
            </li>
            <!-- F4 -->
            <li>
                <span class="le">按样式</span>
                <span class="ri"></span>
            </li>
            <!-- F5 -->
            <li>
                <span class="le">按数量</span>
                <span class="ri"></span>
            </li>
        </ul>
    </div>
</div>
<!-- 商品列表 -->
<div id="goods_list">
    <ul class="goods_ul ul1" style="display: block;">
    </ul>
    <ul class="goods_ul ul2">
    </ul>
    <ul class="goods_ul ul3">
    </ul>
    <ul class="goods_ul ul4">
    </ul>
    <ul class="goods_ul ul5">
    </ul>
    <ul class="goods_ul ul6">
    </ul>
</div>
<script src="./javascripts/jQuery.js"></script>
<script>
    $(function () {
        for (let i = 0; i < $("a.sub1").length; i++) {
            $("a.sub1")
                .eq(i)
                .click(function () {
                    $(".goods_ul")
                .css({
                    display : "none",
                    
                })
                    $(".sub1").removeClass("on");
                    $("a.sub1").eq(i).addClass("on");
                    $(".goods_ul")
                .eq(i)
                .css({
                    display : "block",
                    borderTop: "1px #dfdfdf solid",
                    width:1200 + "px",
                    height:"8000px"
                })
                })
                
        }
            $.ajax({
                url: "./data.json",
            })
            .then(function (res) {
                render(res.datas)
            });
        function render(list) {
            let m00 = list.filter(function (item, index) {
                return (item)
            })
            $(".ul1").append(
                m00.map(item =>
                    `
                    
                    <li class="goods_li">
                    <div class="kuang">
                <div class="colork">
                    <div class="pro ren1">
                <a href="http://127.0.0.1:5500/dist/detail.html"target="_blank">
                    <img src="${item.image}" width="280" alt="鲜花/生日快乐:9枝粉玫瑰 2只粉色绣球 高级配草花语:亲爱的>
                </a>
                    <div class="proname">${item.text_f}</br>
                        <span class="red">${item.text_s}
                        </span>
                    </div>
                <div class="proprice"> ${item.money}
                            </div>
                        </div>
                    </div>
                    </div>
                </li>
                `
                )
            )
            let m200 = list.filter(function (item, index) {
                return (item.n < 200)
            })
            $(".ul2").append(
                m200.map(item =>
                    `
                    <li class="goods_li">
                    <div class="kuang">
                <div class="colork">
                    <div class="pro ren1">
                <a href="http://127.0.0.1:5500/dist/detail.html">
                    <img src="${item.image}" width="280" alt="鲜花/生日快乐:9枝粉玫瑰 2只粉色绣球 高级配草花语:亲爱的>
                </a>
                    <div class="proname">${item.text_f}</br>
                        <span class="red">${item.text_s}
                        </span>
                    </div>
                <div class="proprice"> ${item.money}
                            </div>
                        </div>
                    </div>
                    </div>
                </li>
                `
                )
            )
            let m300 = list.filter(function (item, index) {
                return (item.n >= 200 && item.n < 300)
            })
            $(".ul3").append(
                m300.map(item =>
                    `
                    <li class="goods_li">
                    <div class="kuang">
                <div class="colork">
                    <div class="pro ren1">
                <a href="http://127.0.0.1:5500/dist/detail.html">
                    <img src="${item.image}" width="280" alt="鲜花/生日快乐:9枝粉玫瑰 2只粉色绣球 高级配草花语:亲爱的>
                </a>
                    <div class="proname">${item.text_f}</br>
                        <span class="red">${item.text_s}
                        </span>
                    </div>
                <div class="proprice"> ${item.money}
                            </div>
                        </div>
                    </div>
                    </div>
                </li>
                `
                )
            )
            let m400 = list.filter(function (item, index) {
                return (item.n >= 300 && item.n < 400)
            })
            $(".ul4").append(
                m400.map(item =>
                    `
                    <li class="goods_li">
                    <div class="kuang">
                <div class="colork">
                    <div class="pro ren1">
                <a href="http://127.0.0.1:5500/dist/detail.html">
                    <img src="${item.image}" width="280" alt="鲜花/生日快乐:9枝粉玫瑰 2只粉色绣球 高级配草花语:亲爱的>
                </a>
                    <div class="proname">${item.text_f}</br>
                        <span class="red">${item.text_s}
                        </span>
                    </div>
                <div class="proprice"> ${item.money}
                            </div>
                        </div>
                    </div>
                    </div>
                </li>
                `
                )
            )
            let m500 = list.filter(function (item, index) {
                return (item.n >= 400 && item.n < 500)
            })
            $(".ul5").append(
                m500.map(item =>
                    `
                    <li class="goods_li">
                    <div class="kuang">
                <div class="colork">
                    <div class="pro ren1">
                <a href="http://127.0.0.1:5500/dist/detail.html">
                    <img src="${item.image}" width="280" alt="鲜花/生日快乐:9枝粉玫瑰 2只粉色绣球 高级配草花语:亲爱的>
                </a>
                    <div class="proname">${item.text_f}</br>
                        <span class="red">${item.text_s}
                        </span>
                    </div>
                <div class="proprice"> ${item.money}
                            </div>
                        </div>
                    </div>
                    </div>
                </li>
                `
                )
            )

            let m600 = list.filter(function (item, index) {
                return (item.n >= 500 && item.n < 600)
            })
            $(".ul6").append(
                m600.map(item =>
                    `
                    <li class="goods_li">
                    <div class="kuang">
                <div class="colork">
                    <div class="pro ren1">
                <a href="http://127.0.0.1:5500/dist/detail.html">
                    <img src="${item.image}" width="280" alt="鲜花/生日快乐:9枝粉玫瑰 2只粉色绣球 高级配草花语:亲爱的>
                </a>
                    <div class="proname">${item.text_f}</br>
                        <span class="red">${item.text_s}
                        </span>
                    </div>
                <div class="proprice"> ${item.money}
                            </div>
                        </div>
                    </div>
                    </div>
                </li>
                `
                )
            )
        }
        
        

    })
</script>